<template>
    <div>
        <div>
            <el-col :span="4">
                <el-input v-model="sickroomCode" placeholder="请输入病房编码"></el-input>
            </el-col>
            <el-col :span="4">
            <el-input v-model="nurseName" placeholder="请输入护士名称"></el-input>
             </el-col>
            <el-button type="info" @click="search">查询</el-button>
        </div>

        <!--添加修改模态框-->
        <el-button type="text" @click="saveUI">添加病房</el-button>
        <el-dialog title="" :visible.sync="dialogFormVisible" style="width: 1000px; margin: auto;">
            <el-form :model="form" >
                <el-form-item label="病房编码" :label-width="formLabelWidth">
                    <el-input v-model="form.sickroomCode" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="床位数量" :label-width="formLabelWidth">
                    <el-input v-model="form.bedNumber" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="剩余床位" :label-width="formLabelWidth">
                    <el-input v-model="form.bedResidue" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="病房地址" :label-width="formLabelWidth">
                    <el-input v-model="form.sickroomAddress" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="护士名称" :label-width="formLabelWidth">
                    <el-input v-model="form.nurseName" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="床位价格" :label-width="formLabelWidth">
                    <el-input v-model="form.bedPrice" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitform">确 定</el-button>
            </div>
        </el-dialog>
        <!--添加模态框结束-->


        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="sickroomId" label="病房编号" >
            </el-table-column>
            <el-table-column prop="sickroomCode" label="病房编码" >
            </el-table-column>
            <el-table-column prop="bedNumber" label="床位总数" >
            </el-table-column>
            <el-table-column prop="sickroomAddress" label="病房地址" >
            </el-table-column>
            <el-table-column prop="nurseName" label="护士名称" >
            </el-table-column>
            <el-table-column prop="bedPrice" label="床位价格" >
            </el-table-column>
            <el-table-column prop="status" label="状态" >
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isDelete" :active-value="0" :inactive-value="1"
                        @change="changeStatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="bedResidue" label="剩余床位" >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.bedResidue > 0 ? 'success' : 'danger'">
                        {{ scope.row.bedResidue > 0 ? "剩余" + scope.row.bedResidue + "张" :"床位已满"}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button type="info" size="large" @click="updateUI(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
import { getlist, save, update, changeStatus, search } from "@/api/sickroom/sickroom.js";
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            currentPage: 1,
            pageSize: 5,
            value: true,
            dialogFormVisible: false,
            form: {},
            formLabelWidth: "120px",
            sickroomCode: '',
            nurseName:""
        };
    },
    methods: {
        search() {
            search({ sickroomCode: this.sickroomCode,nurseName:this.nurseName, pageNumber: this.currentPage, pageSize: this.pageSize }).then(r => {
                this.tableData = r.data.list
                this.total = r.data.length
            })
        },
        handleSizeChange(size) {
            this.pageSize = size;
            this.getList();
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.getList();
        },
        getList() {
            getlist({ pageNumber: this.currentPage, pageSize: this.pageSize }).then(
                (r) => {
                    this.tableData = r.data;
                    this.total = r.data.length;
                }
            );
        },
        saveUI() {
            this.form = {}
            this.dialogFormVisible = true
        },
        updateUI(row) {
            let str = JSON.stringify(row)
            let json = JSON.parse(str)
            this.form = json
            this.dialogFormVisible = true
        },
        submitform() {
            if (this.form.sickroomId == null) {
                save(this.form).then(r => {
                    if (r.code == 200) {
                        this.dialogFormVisible = false;
                        this.getList();
                        this.form = {};
                        this.$message.success(r.msg)
                    }
                })
                return;
            }
            update(this.form).then(r => {
                if (r.code == 200) {
                    this.dialogFormVisible = false;
                    this.getList();
                    this.form = {};
                    this.$message.success(r.msg)
                }
            })
        },
        changeStatus(row) {
            changeStatus(row.sickroomId).then(r => {
                if (r.data == 200) {
                    this.getList();
                }
            })
        },
    },
    mounted() {
        this.getList();
    },
};
</script>
  
<style></style>